<template>
  <div>
    <public-modal
      width="800"
      :footer="false"
      title=""
      modalStyle="imgShow"
      :publicVisible="publicVisible"
      @cancel="cancel"
    >
      <div slot="header"></div>
      <div :class="records.type != 'hls' ? '' : ''" slot="content">
        <div @click="cancel" class="close"></div>
        <div v-if="records.type == 'hls'">
          <video ref="video" id="video" class="video-js vjs-default-skin vjs-big-play-centered" />
        </div>
        <div class="checkImg" v-else>
          <p>
            <i v-if="address"></i>&nbsp;&nbsp;{{ address }}&nbsp;&nbsp;&nbsp;&nbsp; <i v-if="time"></i>&nbsp;&nbsp;
            {{ time }}
          </p>
          <img v-if="records.type == 'img'" class="imgUrl" :src="src" />
          <video v-else-if="records.type == 'video'" class="imgUrl" controls autoplay :src="src"></video>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import publicModal from '@/components/publicModal'
export default {
  name: 'imgShow',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      src: '',
      time: '',
      address: '',
      player: null,
      records: {},
    }
  },
  methods: {
    show(records) {
      this.records = records
      var hlsUrl
      this.publicVisible = true
      this.$nextTick(() => {
        if (records.type == 'hls') {
          this.initVideoPlayer(records.src)
        }
        if (records.type == 'img') {
          this.src = records.src
          this.time = records.time
          this.address = records.address
        }
        if (records.type == 'video') {
          this.src = records.src
        }
      })
    },
    cancel() {
      this.publicVisible = false
      this.player.dispose()
    },
    // 初始化播放器方法
    initVideoPlayer(nowPlayVideoUrl) {
      // 第一个选中的要播放的video标签, 记得是video标签,
      this.player = this.$video(document.querySelector('#video'), {
        autoplay: true, // 是否自动播放
        controls: true, // 是否显示控件
      })
      this.player.src({
        src: nowPlayVideoUrl,
        type: 'application/x-mpegURL', // 修改这个type值
      })
    },
  },
}
</script>
<style lang="less">
.imgShow {
  .imgUrl {
    // width: 100%;
    height: 500px;
  }
  .modalHeader,
  .modalCotent,
  .modalFooter {
    background: none !important;
  }
  .modalHeader,
  .modalFooter {
    height: 0 !important;
  }
  .modalCotent {
    position: relative;
    top: 0;
    left: 0;
    height: 500px;
    padding: 4% 5% 3% !important;
    // background: url('~@/assets/images/bigImg.png') no-repeat center / 100% 100% !important;
  }

  .checkImg {
    p {
      margin-bottom: 20px;
      text-align: center;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #02fffc;
      i {
        width: 10px;
        height: 10px;
        display: inline-block;
        background: #02fffc;
        border-radius: 50%;
      }
    }
  }
  .close {
    position: absolute;
    top: 35px;
    right: -50px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: url('~@/assets/imgs/close.png') no-repeat center / 60% 60% !important;
  }
}
#video {
  width: 100%;
  height: 440px;
}
</style>
